<nz-card class="m-b-2">
  <div class="common-search-wrap">
    <div class="common-search-forms">
      <div class="common-form-item">
        <label class="common-search-label">订单编号</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入订单编号"
            [(ngModel)]="seachParams.orderNum"
          />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">关联回收单号</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入订单编号"
            [(ngModel)]="seachParams.renewalNo"
          />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">包含商品</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入机器编号/imei/序列号"
            [(ngModel)]="seachParams.goods"
          />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">收货人</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="姓名或手机号"
            [(ngModel)]="seachParams.consignee"
          />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">状态</label>
        <div class="common-search-conrol">
          <nz-select
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="stateSelected">
            <nz-option
              *ngFor="let item of orderStateOptions"
              [nzLabel]="item.label"
              [nzValue]="item.value">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">渠道</label>
        <div class="common-search-conrol">
          <nz-select
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="channelSelected">
            <nz-option
              *ngFor="let item of channelOptions"
              [nzLabel]="item.name"
              [nzValue]="item.content">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">推广渠道</label>
        <div class="common-search-conrol">
          <nz-select
              nzShowSearch
              nzAllowClear
              nzMode="multiple"
              [nzMaxTagCount]="1"
              nzPlaceHolder="请选择推广渠道"
              [(ngModel)]="seachParams.cidList">
              <nz-option
                *ngFor="let val of extensionOptions"
                [nzLabel]="val.name"
                [nzValue]="val.content">
              </nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">用户身份</label>
        <div class="common-search-conrol">
          <nz-select
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="userTypeSelected">
            <nz-option nzLabel="未选身份" nzValue="0"></nz-option>
            <nz-option nzLabel="B端" nzValue="2"></nz-option>
            <nz-option nzLabel="C端" nzValue="1"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">货主</label>
        <div class="common-search-conrol">
          <nz-select
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="请选择货主"
            [(ngModel)]="seachParams.supplierIdList">
            <nz-option
              *ngFor="let option of supplierOptions"
              [nzLabel]="option.name"
              [nzValue]="option.id">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">物流单号</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入物流单号"
            [(ngModel)]="seachParams.expressNum"
          />
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">下单时间</label>
        <div class="common-search-conrol">
          <nz-range-picker [(ngModel)]="creatDates" (ngModelChange)="onTimeChange($event, 0)"></nz-range-picker>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">付款时间</label>
        <div class="common-search-conrol">
          <nz-range-picker [(ngModel)]="payDates" (ngModelChange)="onTimeChange($event, 1)"></nz-range-picker>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">发货时间</label>
        <div class="common-search-conrol">
          <nz-range-picker [(ngModel)]="shipDates" (ngModelChange)="onTimeChange($event, 2)"></nz-range-picker>
        </div>
      </div>

      <div class="common-form-item">
        <button nz-button nzType="primary" class="m-r-8" [nzLoading]="tableParams.tableLoading" (click)="seachData()">
          查询
        </button>
        <button nz-button nzType="default" (click)="resetData()">重置</button>
        <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
          {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
        </button>
      </div>
    </div>
  </div>
</nz-card>

<nz-card>
  <div nz-row nzJustify="space-between" class="opera-btns p-b-10">
    <div class="opera-lf">
      <button
        nz-button
        nzType="primary"
        (click)="exportTable()"
      >导出</button>

      <button
        *ngIf="permissionService.userPermission.has('used-store:usedOrderList:check')"
        nz-button
        nzType="primary"
        class="m-l-10"
        (click)="showModal()"
      >批量审核</button>
    </div>

    <div class="opera-rt">
      <nz-radio-group
        nzButtonStyle="solid"
        [(ngModel)]="quickScreenSelected"
        (ngModelChange)="quickScreenChange($event)">
        <label
          *ngFor="let option of quickScreenStatus"
          nz-radio-button
          [nzValue]="option.value">
          {{ option.label }}
        </label>
      </nz-radio-group>
    </div>
  </div>

  <div class="table-wrap pagination-wrap-position">
    <nz-table
      #basicTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzBordered
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="tableParams.tableLoading"
      [nzData]="tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableParams.total"
      [nzPageIndex]="tableParams.page"
      [nzPageSize]="tableParams.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
      (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
    >
      <thead>
        <tr>
          <th
            nzWidth="50px"
            nzLeft
            [nzDisabled]="tableDisabled"
            [(nzChecked)]="checked"
            [nzIndeterminate]="indeterminate"
            (nzCheckedChange)="onAllChecked($event)"
          ></th>
          <th nzAlign="left">商品</th>
          <th nzAlign="right">价格</th>
          <th nzAlign="center">订单状态</th>
          <th nzAlign="center">收货人</th>
          <th nzAlign="center">收货地址</th>
          <th nzAlign="center">应收金额</th>
          <th nzAlign="center">实收金额</th>
          <th nzAlign="center">物流信息</th>
          <th nzAlign="center">操作</th>
        </tr>
      </thead>

      <tbody>
        <ng-container *ngFor="let data of basicTable.data; let index = index;">
          <!-- 分隔行 -->
          <tr [hidden]="tableData.length === index">
            <td colSpan="10" style="padding: 5px;"></td>
          </tr>

          <tr>
            <td
              nzLeft
              [nzDisabled]="data.status !== 3"
              [nzChecked]="setOfCheckedId.has(data.id)"
              (nzCheckedChange)="onItemChecked(data.id, $event)">
            </td>
            <td colSpan="9" style="padding: 0;">
              <!-- S 商品信息 -->
              <div class="sub-table-pwrap">
                <div class="sub-table-plf">
                  <p>订单号: <span class="blue-color">{{ data.orderNum || '-' }}</span></p>
                  <!-- 渠道 & 身份 -->
                  <div class="p-l-10">
                    <ng-container *ngFor="let channelItem of channelOptions">
                      <nz-tag
                        *ngIf="channelItem.content == data.platform"
                        [nzColor]="channelItem.color">
                        {{ channelItem.name }}
                      </nz-tag>
                    </ng-container>
                  </div>

                  <ng-container [ngSwitch]="data.userType">
                    <nz-tag *ngSwitchCase="1" [nzColor]="'#87d068'">C端</nz-tag>
                    <nz-tag *ngSwitchCase="2" [nzColor]="'#2db7f5'">B端</nz-tag>
                  </ng-container>

                  <!-- 推广渠道 -->
                  <ng-container *ngFor="let extension of extensionOptions">
                    <nz-tag
                      *ngIf="extension.content == data.cid"
                      nzColor="success">
                      {{ extension.name }}
                    </nz-tag>
                  </ng-container>

                  <p class="p-l-10">关联回收单号: <span class="sub-txt">{{ data.renewalNo || '-' }}</span></p>

                  <p class="p-l-10">下单时间: <span class="sub-txt">{{ data.createTime || '-' }}</span></p>
                  <p class="p-l-10">付款时间: <span class="sub-txt">{{ data.payTime || '-' }}</span></p>
                </div>

                <div class="sub-table-prt">
                  <!-- 1，如果【子订单数量 != 0】——>n个子订单；
                  2，如果【货主 == 0】——>自营；
                  3，如果【货主 != 0】——>货主简称；
                  4，其他——>不显示 -->
                  <ng-container *ngIf="data?.oldList && data?.oldList?.length;else templateSond">
                    <button
                      nz-button
                      nzType="link"
                      (click)="showChildModal(data)">
                      {{ data?.oldList?.length || 0 }}个子订单
                    </button>
                  </ng-container>

                  <ng-template #templateSond>
                    <ng-container *ngIf="data?.supplierId !== -1">
                      <ng-container *ngIf="data?.supplierName;else templateHon">
                        <a
                          nz-button
                          nzType="link"
                          target="_blank"
                          [routerLink]="['/stock/sqeAdd', data?.supplierId]">
                          {{ data?.supplierName }}
                        </a>
                      </ng-container>

                      <ng-template #templateHon>
                        <nz-tag nzColor="success">自营</nz-tag>
                      </ng-template>
                    </ng-container>

                    <!-- <ng-template #templateSupplier>
                      <nz-tag nzColor="success">自营</nz-tag>
                    </ng-template> -->
                  </ng-template>
                </div>
              </div>
              <!-- E 商品信息 -->

              <!-- subTable -->
              <nz-table nzTemplateMode nzBordered class="sub-table-wrap">
                <tbody>
                  <tr>
                    <!-- 商品 & 价格/数量 -->
                    <td colSpan="2" style="padding: 0;">
                      <div class="table-good-list" *ngFor="let item of data?.mallOrderDetailsList">
                        <dl class="goods-dl">
                          <dt>
                            <img
                              nz-image
                              width="45px"
                              height="45px"
                              [nzSrc]="item?.icon"
                              [nzFallback]="fallback"
                              alt=""
                            />
                          </dt>
                          <dd>
                            <a
                              class="goods-name blue-color"
                              target="_blank"
                              [routerLink]="['/used-store/usedCommodityInfo']"
                              [queryParams]="{ id: item.goodsId }"
                              nz-tooltip
                              [nzTooltipTitle]="item?.goodsName || '-'">
                              {{ item?.goodsName || '-' }}
                            </a>
                            <span class="p-t-5">
                              {{ item?.equipmentCode }}
                              <nz-tag [nzColor]="'cyan'" *ngIf="item?.supplierId === 0">自营</nz-tag>
                            </span>
                          </dd>
                        </dl>
                        
                        <p class="goods-price">
                          <span>{{ item?.price || '-' }}元</span>
                          <!-- <span>{{ item?.num || '-' }}件</span> -->
                        </p>
                      </div>
                    </td>

                    <!-- 订单状态 -->
                    <td nzAlign="center">
                      <span [ngStyle]="{'color': data.status | orderStatus: 'color'}">
                        {{ data.status | orderStatus: 'text' }}
                      </span>
                    </td>

                    <!-- 收货人 -->
                    <td nzAlign="center">
                      <p>
                        <a
                          style="color: #409EFF;"
                          target="_blank"
                          [routerLink]="['/customer/tabs', data.userId, 0]">
                          {{ data.consignee || '-' }}
                        </a>
                        <a
                          style="color: #409EFF;"
                          (click)="quantityNumSearch(data)">
                          （{{ data?.numberCount || 0 }}单）
                        </a>
                      </p>
                      <p>{{ data.tel || '-' }}</p>
                    </td>

                    <!-- 收货地址 -->
                    <td nzAlign="center">
                      {{ data.address || '-' }}
                    </td>

                    <!-- 应收金额 -->
                    <td nzAlign="center">
                      ￥ {{ data?.totalPrice || '0' }}
                    </td>

                    <!-- 实收金额 -->
                    <td nzAlign="center">
                      <p style="font-size: 12px;">现金: {{ data.realPrice || '0' }}</p>
                      <p style="font-size: 12px;">爱豆: {{ data.aiDouAmount || '0' }}</p>
                    </td>

                    <!-- 物流信息 -->
                    <td nzAlign="center">
                      <p>{{ data.expressName || '-' }}</p>
                      <p>{{ data.expressNum || '-' }}</p>
                      <p>发货时间: {{ data.shipTime || '-' }}</p>
                    </td>

                    <!-- 操作 -->
                    <td nzAlign="center">
                      <button
                        *ngIf="permissionService.userPermission.has('used-store:usedOrderList:detail')"
                        nz-button
                        nzType="link"
                        routerLink="/used-store/usedOrderDetails"
                        [queryParams]="{id: data.id}">
                        详情
                      </button>
                      <button nz-button nzType="link" (click)="followModal(data)">跟进</button>
                    </td>
                  </tr>
                </tbody>
              </nz-table>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-card>

<!-- 批量审核 Modal START -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isVisible"
  nzTitle="批量审核"
  (nzOnCancel)="handleCancel()">

  <div *nzModalContent>
    <div class="custom-model-body">
      <!-- body START -->
      <form nz-form class="modal-body" [formGroup]="examineForm">
        <nz-form-item>
          <nz-form-label nzSpan="6">审核意见</nz-form-label>
          <nz-form-control nzSpan="18" nzErrorTip="请输入审核意见!">
            <nz-textarea-count [nzMaxCharacterCount]="100">
              <textarea rows="4" maxlength="100" formControlName="auditDesc" nz-input placeholder="请输入审核意见"></textarea>
            </nz-textarea-count>
          </nz-form-control>
        </nz-form-item>
      </form>
      <!-- body END -->
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="primary" (click)="submitForm(5)">通过{{ setOfCheckedId.size }}</button>
        <button nz-button nzType="primary" nzDanger (click)="submitForm(4)">不通过{{ setOfCheckedId.size }}</button>
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- 批量审核 Modal END -->

<!-- 跟进Component -->
<app-follow-up #followUpRef [initParams]="initParams" [ohterParams]="{ type: 1 }"></app-follow-up>

<!-- S 子订单List Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzWidth]="1000"
  [nzFooter]="null"
  [(nzVisible)]="isSonVisible"
  [nzTitle]="'子订单列表'"
  (nzOnCancel)="isSonVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <nz-table
        #sonTable
        nzSize="small"
        nzBordered
        [nzData]="sonTableDta">
        <thead>
          <tr>
            <th nzAlign="center">订单编号</th>
            <th nzAlign="center">状态</th>
            <th nzAlign="center">货主</th>
            <th nzAlign="center">应付金额</th>
            <th nzAlign="center">实付金额</th>
            <th nzAlign="center">爱豆抵扣</th>
            <th nzAlign="center">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of sonTable.data">
            <td nzAlign="center">
              <a
                nz-button
                nzType="link"
                target="_blank"
                routerLink="/used-store/usedOrderDetails"
                [queryParams]="{id: data.id}">
                {{ data?.orderNum }}
              </a>
            </td>
            <td nzAlign="center">
              <span [ngStyle]="{'color': data.status | orderStatus: 'color'}">
                {{ data.status | orderStatus: 'text' }}
              </span>
            </td>
            <td nzAlign="center">
              <a
                nz-button
                nzType="link"
                target="_blank"
                [disabled]="!data?.supplierName"
                [routerLink]="['/stock/sqeAdd', data.supplierId]">
                {{ data?.supplierName || '-' }}
              </a>
            </td>
            <td nzAlign="center">{{ data?.totalPrice || '0' }}</td>
            <td nzAlign="center">{{ data?.realPrice || '0' }}</td>
            <td nzAlign="center">{{ data?.aiDouAmount || '0' }}</td>
            <td nzAlign="center">
              <button nz-button nzType="link" (click)="followModal(data)">跟进信息</button>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</nz-modal>
<!-- E 子订单List Modal -->
